<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>门诊病历</title>
    <link rel="stylesheet" href="/print/_css/caseReport.css" />
  </head>

  <body>
    <div id="app" v-if="dataInfo">
      <table width="100%" style="border: none;">
        <tr>
          <td style="width:40mm;">
            <img class="img-logo" :src="dataInfo.hospital.logo" alt="" />
          </td>
          <td style="text-align: center">
            <div style="font-size:5mm;">{{dataInfo.hospital.name}}</div>
            <div style="margin-top:1mm;">
              门诊病历
            </div>
          </td>
          <td style="width:40mm;"></td>
        </tr>
      </table>

      <table
        width="100%"
        style="table-layout: fixed;margin-top:10mm;border: none;"
      >
        <tr>
          <td>科室：{{ dataInfo.professionalDeptName }}</td>
          <td style="text-align: center">
            就诊日期：{{ toTime(dataInfo.time) }}
          </td>
          <td style="text-align: right">
            档案号：{{ dataInfo.patientInfo.archivesCode }}
          </td>
        </tr>
      </table>

      <div class="user-box">
        <table width="100%" style="border: none;">
          <tr>
            <td>姓名：{{ dataInfo.patientInfo.name }}</td>
            <td>
              性别： {{dataInfo.patientInfo.sex
              ==1?'男':(dataInfo.patientInfo.sex ==2?'女':'不详')}}
            </td>
            <td>
              年龄：
              <span v-if="dataInfo.patientInfo.age>17"
                >{{ dataInfo.patientInfo.age }}岁</span
              >
              <span v-else>
                {{ dataInfo.patientInfo.birthday|toAge }}
              </span>
            </td>
            <!-- <td>
              民族：{{dataInfo.patientInfo.nationId |
              toEnum(dataInfo.nationEnum)}}
            </td> -->
            <td>
              电话：{{ dataInfo.patientInfo.mobile }}
            </td>
            <!-- <td v-if="dataInfo.patientInfo.age>18">
              婚姻：{{ dataInfo.patientInfo.isMarried == 1 ? "已婚" : "未婚" }}
            </td>
            <td v-if="dataInfo.patientInfo.age>18">
              职业：{{ dataInfo.patientInfo.occupationId
              |toEnum(dataInfo.occupationEnum)}}
            </td> -->
          </tr>
          <!-- <tr>
            <td colspan="2">证件号：{{ dataInfo.patientInfo.idCard }}</td>
            <td colspan="2">电话：{{ dataInfo.patientInfo.mobile }}</td>
          </tr> -->
        </table>
      </div>
      <div style="min-height:210mm;">
        <table width="100%" style="border: none;margin: 5mm 0;">
          <template v-for="(item2,index) in dataInfo.dataForm">
            <tr v-if="item2.value" :key="index" style="height:8mm;">
              <td class="title" style="width:25mm;">{{ item2.name }}：</td>
              <td>
                <div v-if="item2.component=='SELECT'||item2.component=='RADIO'">
                  {{ toArrayStr(item2,'one') }}
                </div>
                <div v-else-if="item2.component=='CHECKBOX'">
                  <span v-if="item2.name=='初步诊断'">
                    {{ dataInfo.cureFirstVisitRecord | toCureFirstVisitRecord }}
                  </span>
                  <span v-else>
                    {{ toArrayStr(item2,'more') }}
                  </span>
                </div>
                <div v-else>
                  <span>{{ item2.value }}</span>
                </div>
              </td>
            </tr>
          </template>
          <tr
            v-if="dataInfo.curePatientHistory.pastHistory"
            style="height:8mm;"
          >
            <td class="title">既往史：</td>
            <td>
              {{ dataInfo.curePatientHistory.pastHistory }}
            </td>
          </tr>
          <tr
            v-if="dataInfo.curePatientHistory.personalHistory"
            style="height:8mm;"
          >
            <td class="title">个人史：</td>
            <td>{{ dataInfo.curePatientHistory.personalHistory }}</td>
          </tr>
          <tr
            v-if="dataInfo.curePatientHistory.familyHistory"
            style="height:8mm;"
          >
            <td class="title">家族史：</td>
            <td>{{ dataInfo.curePatientHistory.familyHistory }}</td>
          </tr>
          <tr
            v-if="dataInfo.curePatientHistory.seedlingsHistory"
            style="height:8mm;"
          >
            <td class="title">疫苗接种史：</td>
            <td>{{ dataInfo.curePatientHistory.seedlingsHistory }}</td>
          </tr>

          <tr
            v-show="dataInfo.curePatientHistory.afterTheBirth"
            v-if="dataInfo.patientInfo.sex==2&&dataInfo.patientInfo.age<18"
            style="height:8mm;"
          >
            <td class="title">经带胎产史：</td>
            <td>{{ dataInfo.curePatientHistory.afterTheBirth }}</td>
          </tr>
          <tr
            v-if="dataInfo.curePatientHistory.checkupHistory"
            style="height:8mm;"
          >
            <td class="title">实验室及辅助检查：</td>
            <td>{{ dataInfo.curePatientHistory.checkupHistory }}</td>
          </tr>
          <tr v-if="dataInfo.curePatientAllergy" style="height:8mm;">
            <td class="title">过敏史：</td>
            <td v-if="dataInfo.curePatientAllergy.length>0">
              <span
                v-for="(item,index) in dataInfo.curePatientAllergy"
                :key="index"
                style="margin-right:10px;"
                >{{ item.allergens }},{{ item.allergicReaction }},{{
                item.allergicDegree }};</span
              >
              <span v-if="dataInfo.curePatientAllergy.length==0">否认</span>
            </td>
            <td v-else>无</td>
          </tr>
        </table>

        <div class="yao-box" v-if="dataInfo.westwardRecipe">
          <div>Rp</div>
          <div v-if="dataInfo.westwardRecipe.length>0" style="margin-top:1mm;">
            西药处方：
          </div>
          <table
            v-if="dataInfo.westwardRecipe.length>0"
            width="100%"
            style="margin-top:1mm;border: none;"
          >
            <tr
              v-for="(item,index) in dataInfo.westwardRecipe"
              :key="index"
              style="height:8mm;"
            >
              <td style="width:20mm;">{{ index + 1 }}</td>
              <td>{{ item.drugName }}</td>
              <td>{{ item.specs }}</td>
              <td>
                {{ item.useTotal }}/{{item.totalUnit|toEnum(dataInfo.unitEnum)}}
              </td>
              <td>{{item.frequency|toEnum(dataInfo.frequencyEnum)}}</td>
            </tr>
          </table>
        </div>
        <div class="yao-box" v-if="dataInfo.traditionRecipe">
          <div v-if="dataInfo.traditionRecipe.length>0">R</div>
          <div v-if="dataInfo.traditionRecipe.length>0" style="margin-top:1mm;">
            中药处方：
          </div>
          <table
            v-if="dataInfo.traditionRecipe.length>0"
            style="margin-top:1mm;border:none;width:100%"
          >
            <template v-for="(item,index) in dataInfo.traditionRecipe">
              <tr
                v-for="(item2,index2) in item.curePrescriptionDrugInfos"
                :key="index2"
                style="height:8mm;"
              >
                <td style="width:20mm;">{{ index2 + 1 }}</td>
                <td>
                  {{ item2.drugName }}&nbsp;{{ item2.oneDose
                  }}{{item2.oneDoseUnit|toEnum(dataInfo.unitEnum)}}
                </td>
              </tr>
              <tr style="height:8mm;">
                <td colspan="2">
                  <div style="display: flex;">
                    <div style="flex:1;">
                      用法：{{item.curePrescriptionUseInfo.usage|toEnum(dataInfo.useEnum)}}
                    </div>
                    <div style="flex:1;">
                      单次剂量：{{item.curePrescriptionUseInfo.dailyDose|toEnum(dataInfo.unitEnum)}}
                    </div>
                    <div style="flex:1;">
                      频次：{{item.curePrescriptionUseInfo.frequency|toEnum(dataInfo.frequencyEnum)}}
                    </div>
                    <div style="flex:1;">
                      天数：{{ item.curePrescriptionUseInfo.day }}
                    </div>
                  </div>
                </td>
              </tr>
            </template>
          </table>
        </div>
      </div>

      <div class="footer-box">
        <div style="flex-grow: 1;">
          {{ dataInfo.hospital.province }}{{ dataInfo.hospital.city }}{{
          dataInfo.hospital.district }}{{ dataInfo.hospital.address }}
        </div>
        <div style="flex-shrink: 0;">医师：{{ dataInfo.doctorName }}</div>
      </div>
    </div>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script>
      new Vue({
        data: {
          dataInfo: null,
          time: new Date(),
        },
        mounted() {
          var th = this;
          var fn = function() {
            //这里要判断图片是否加载完成
            var imgs = document.getElementsByTagName("img");
            var timer = setInterval(() => {
              var i = 0;
              for (var index = 0; index < imgs.length; index++) {
                var element = imgs[index];
                if (element.complete) {
                  i++;
                }
              }

              if (i == imgs.length) {
                clearInterval(timer);
                window.print();
              }
            }, 500);
          };
          window.addEventListener("message", function(e) {
            th.dataInfo = e.data;
            th.$nextTick(function() {
              fn();
            });
          });
        },
        methods: {
          todurgSpec(obj) {
            var th = this;
            if (!obj) return "";
            var fn = function(val) {
              var d = th.dataInfo.unitEnum.find((d2) => {
                return d2.id == val;
              });
              if (d) {
                return d.desc;
              } else {
                return "";
              }
            };
            var str = `${obj.dose}${fn(obj.doseUnit)}*${obj.preparationNum}${fn(
              obj.preparationUnit
            )}`;
            return str;
          },
          //特定的值解析|动态病历
          toArrayStr(obj, type) {
            var th = this;
            var result = [];
            try {
              var arr = JSON.parse(obj.componentValue);
              if (type == "one") {
                var data = arr.find((d) => {
                  return d.id == obj.value;
                });
                if (data) {
                  result.push(data.value);
                }
              } else {
                if (obj.value) {
                  var strIndex = obj.value.indexOf("[");
                  var valueArr = [];
                  if (strIndex == -1) {
                    valueArr = obj.value.split(",");
                  } else {
                    valueArr = JSON.parse(obj.value);
                  }
                  valueArr.forEach((d) => {
                    var data = arr.find((d2) => {
                      return d2.id == d;
                    });
                    if (data) {
                      result.push(data.value);
                    }
                  });
                }
              }
            } catch (error) {}
            return result.join(",");
          },
          toTime(time) {
            if (!time) return "";
            if (typeof time == "string") time = new Date(time);
            var fn = (v) => {
              if (v < 10) v = "0" + v;
              return v;
            };
            return (
              time.getFullYear() +
              "-" +
              fn(time.getMonth() + 1) +
              "-" +
              fn(time.getDate())
            );
          },
        },
        filters: {
          toCureFirstVisitRecord(value) {
            var str = "";
            if (value) {
              value.forEach((element) => {
                if (element) {
                  if (str) {
                    str += "," + element.firstVist;
                  } else {
                    str = element.firstVist;
                  }
                }
              });
            }
            return str;
          },
          toEnum(value, arr) {
            var str = "";
            if (!arr) return str;
            var data = arr.find((d) => {
              return d.id == value;
            });
            if (data) {
              str = data.desc;
            }
            return str;
          },
          toAge(birthday) {
            if (!birthday) return "";
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var myDate = new Date(birthday);
            var myYear = myDate.getFullYear();
            var myMonth = myDate.getMonth() + 1;
            var myDay = myDate.getDate();
            var myHour = myDate.getHours();
            var myMinute = myDate.getMinutes();
            var mySecond = myDate.getSeconds();
            var isLeapYear = function isLeapYear(year) {
              return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
            };
            var getDaysOfMonth = function getDaysOfMonth(dateStr) {
              var date = new Date(dateStr);
              var year = date.getFullYear();
              var mouth = date.getMonth() + 1;
              var day = 0;

              if (mouth == 2) {
                day = isLeapYear(year) ? 29 : 28;
              } else if (
                mouth == 1 ||
                mouth == 3 ||
                mouth == 5 ||
                mouth == 7 ||
                mouth == 8 ||
                mouth == 10 ||
                mouth == 12
              ) {
                day = 31;
              } else {
                day = 30;
              }
              return day;
            };
            var gapSecond = second - mySecond;
            if (gapSecond < 0) {
              minute -= 1;
              gapSecond = 60 - mySecond + second;
            }
            var gapMinute = minute - myMinute;
            if (gapMinute < 0) {
              hour -= 1;
              gapMinute = 60 - myMinute + minute;
            }
            var gapHour = hour - myHour;
            if (gapHour < 0) {
              day -= 1;
              gapHour = 24 - myHour + hour;
            }
            var gapDay = day - myDay;
            if (gapDay < 0) {
              month -= 1;
              gapDay = getDaysOfMonth(birthday) - myDay + day;
            }
            var gapMonth = month - myMonth;
            if (gapMonth < 0) {
              year -= 1;
              gapMonth = 12 - myMonth + month;
            }
            var gapYear = year - myYear;
            if (gapYear < 0) {
              gapYear = 0;
            }
            var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
            // (gapHour<10? ("0"+gapHour): gapHour)+"时 " +
            // (gapMinute<10? ("0"+gapMinute): gapMinute)+"分 " +
            // (gapSecond<10? ("0"+gapSecond): gapSecond)+"秒";

            return dateStr;
          },
        },
      }).$mount("#app");
    </script>
  </body>
</html>
